<template>
  <div class="addRoom-Container">
    <div class="add">
      <el-button @click="showForm('add')">新增房间</el-button>
    </div>
    <el-dialog :title="formTitle" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules">
        <el-form-item label="房间号码" :label-width="formLabelWidth" prop="roomNumber">
          <el-input v-model="form.roomNumber" autocomplete="off" style="width: 90%"></el-input>
        </el-form-item>
        <el-form-item label="房间类型" :label-width="formLabelWidth" prop="roomType">
          <el-select v-model="form.roomType" placeholder="请选择房间类型">
            <el-option
                v-for="(type,index) in roomTypeList"
                :label="type.typeName"
                :value="type.typeNum"
                @click.native="saveRoomMoney(type.typePrice)"
                :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房间定价" :label-width="formLabelWidth" prop="roomMoney">
          <el-input v-model="form.roomMoney" autocomplete="off" style="width: 90%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendRoom">确 定</el-button>
      </div>
    </el-dialog>
    <div class="room-table">
      <el-table
          :data="roomData"
          border
          style="width: 100%">
        <el-table-column
            prop="roomNum"
            label="房号"
            align="center"
            width="180">
        </el-table-column>
        <el-table-column
            prop="roomType"
            label="类型"
            align="center"
            :formatter="typeFormat"
            :filters="roomTypeFilterConfig"
            :filter-method="filterType"
        >
        </el-table-column>
        <el-table-column
            prop="price"
            align="center"
            label="定价">
          <template slot-scope="scope">
            <span>￥{{ scope.row.price }}</span>
          </template>
        </el-table-column>

        <el-table-column
            prop="updateTime"
            align="center"
            label="更新日期"
            :formatter="dateFormat"
        >
        </el-table-column>
        <el-table-column
            prop="createTime"
            align="center"
            label="创建日期"
            :formatter="dateFormat"
        >
        </el-table-column>
        <el-table-column
            align="center"
            label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="showForm('modify',scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="deleteRoom(scope.row.roomId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  /**
   * HomeRoom
   * @module '@/component/HomeHeader'
   * @desc 页面头栏
   * @author 开朗的不得了
   * @date 2023年3月4日19点41分
   * @param {Object} []    - 参数说明
   * @param {String} [] - 参数说明
   * @example
   *  <HomeRoom/>
   **/

  name: "HomeRoom",
  data(){
    return {
      roomData:[],
      dialogFormVisible: false,
      form: {
        roomNumber: '',
        roomType: '',
        roomMoney: '',
      },
      formLabelWidth: '120px',
      rules:{
        roomNumber: [
          { required: true, message: '请输入房间号码', trigger: 'blur' },
        ],
        roomType:[
          { required: true, message: '请选择房间类型', trigger: 'blur' },
        ],
        roomMoney:[
          { required: true, message: '请输入房间定价', trigger: 'blur' },
        ]
      },
      formTitle:'新增房间',
      formType:'',
      roomId:null,
      typeList:{}
    }
  },
  computed:{
    // 获取房间列表数据
    roomListData(){
      return this.$store.state[0].roomListData || [];
    },
    // 获取房间类型列表
    roomTypeList(){
      return this.$store.getters.getTypeList || {};
    },
    // 获取房间类型名列表
    TypeNameList(){
      return this.$store.getters.getTypeNameList || {};
    },
    // 获取筛选格式的类别列表[{text:...,value:...}]
    roomTypeFilterConfig(){
      return this.$store.getters.getTypeFilterConfig || [];
    }
  },
  mounted(){
    this.getRoom();
  },
  methods:{
    // 获取房间列表数据
    getRoom(){
      this.$store.dispatch('getRoomListData');
    },
    // 选择房间类型时将房价保存到form中
    saveRoomMoney(roomMoney){
      this.form.roomMoney=roomMoney;
    },
    // 新增、修改房间配置
    sendRoom(){    //添加房间信息或者修改房间信息
      const roomInfo = {};
      roomInfo['roomNum'] = this.form.roomNumber;
      roomInfo['roomType'] = this.form.roomType;
      roomInfo['roomMoney'] = this.form.roomMoney;
      if(this.formType==='modify'){
        roomInfo['roomId'] = this.roomId;
        this.$store.dispatch('modifyRoomConfig', roomInfo);
      }else{
        this.$store.dispatch('addRoom', roomInfo);
      }
      this.dialogFormVisible=false;
      setTimeout(()=>{this.getRoom();}, 500)
    },

    // 删除房间
    deleteRoom(roomId){
      this.$confirm('此操作将永久删除该房间信息, 是否继续?', '操作提示', {   //点击删除按钮时先弹框警告
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('deleteRoom', {roomId});
        setTimeout(()=>{this.getRoom()}, 500)
      }).catch(()=>{})
    },

    // 打开dialog框
    showForm(type,room=undefined){
      this.dialogFormVisible=true;
      this.formTitle="新增房间";
      if(type==='modify'){   //判断是修改房间信息还是添加房间
        this.formTitle="修改房间";
        let tmpRoomData={
          roomNumber:room.roomNum,
          roomType:room.roomType,
          roomMoney:room.price
        };
        this.form=tmpRoomData;
        this.formType='modify';
        this.roomId=room.roomId;
      }else{   //添加房间
        this.form={
          roomNumber: '',
          roomType: '',
          roomMoney: '',
        }
        this.formType='';
      }
    },

    // 将时间戳转换为时间显示
    dateFormat(row, column, cellValue){
      if (cellValue == null || cellValue == "") return "";
      let date = new Date(parseInt(cellValue));//时间戳为10位需*1000，如果为13位的话不需乘1000。
      let Y = date.getFullYear() + '-';
      let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
      let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
      let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
      let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
      let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },

    // 将类型号转换为类型显示
    typeFormat(row, column, cellValue){
      if (cellValue == null || cellValue == '') return '';
      const typeNameList = this.TypeNameList;
      return typeNameList[parseInt(cellValue)];
    },
    // 类别筛选功能配置
    filterType(value, row, column) {
      return row.roomType === value;
    }

  },
  watch:{
    // 仓库数据每发生变更就更新roomData的值。
    roomListData(){
      this.roomData = this.roomListData;
    }
  }
}
</script>

<style lang="less" scoped>
  .addRoom-Container{
    z-index: 100;
    width: calc(100% - 40px);
    padding: 20px;
  }
  .room-table {
    margin-top: 20px;
  }
</style>